import React, { useState } from 'react';

import { Button, Col, Layout, Row } from "antd"
import SimpleCodeEdit from './SimpleCodeEdit';
import { Typography } from 'antd';
import { useUpdateEffect } from '@umijs/hooks';
import { Card } from 'antd';
const { Content } = Layout;
export default (props) => {

    const { onRun, result, record } = props;
    const { Paragraph } = Typography;


    const tmpl = '%systemroot%\\system32\\inetsrv\\appcmd stop site /site.name:"{ccccname}";\r'
    + '%systemroot%\\system32\\inetsrv\\appcmd start site /site.name:"{ccccname}";\r'
    + '%systemroot%\\system32\\inetsrv\\appcmd recycle apppool /apppool.name:"{ccccname}";\r'
    const [innerRecord, setInnerRecord] = useState({ code: tmpl.replace(/{ccccname}/g, "iisname")  });

    useUpdateEffect(() => {
      
        if (record.id) {
            setInnerRecord({ ...innerRecord, code: tmpl.replace(/{ccccname}/g, record.iisName) })
        }

    }, [record]);
    return <>
        <Content style={{ overflow: "auto" }}>

            <Row >
                <Col >
                    <Button style={{ marginLeft: "10px" }}
                        onClick={() => {
                            onRun(innerRecord.code)
                        }}
                        type='primary' >执行</Button>
                </Col>

            </Row>

        </Content>
        <Row style={{ padding: "12px" }}>
            <Col style={{ fontSize: "12px" }}>
                <Card size='small' title="常用命令">
                    <Paragraph copyable={{ text: '%systemroot%\\system32\\inetsrv\\appcmd stop site /site.name:"YourSiteName";\r' }}>停止IIS网站：%systemroot%\system32\inetsrv\appcmd start site /site.name:[YourSiteName]</Paragraph>
                    <Paragraph copyable={{ text: '%systemroot%\\system32\\inetsrv\\appcmd start site /site.name:"YourSiteName";\r' }}>启动IIS网站：%systemroot%\system32\inetsrv\appcmd stop site /site.name:[YourSiteName]</Paragraph>
                    <Paragraph copyable={{ text: '%systemroot%\\system32\\inetsrv\\appcmd recycle apppool /apppool.name:"YourAppPoolName";\r' }}>回收程序池：%systemroot%\system32\inetsrv\appcmd recycle apppool /apppool.name:[YourSiteName]</Paragraph>
                </Card>
            </Col>
        </Row>

        <SimpleCodeEdit
            onValueChange={async (value) => {
                setInnerRecord({ ...value });
            }}
            loading={false}
            record={{ ...innerRecord }}
        />
        {result.length > 0 ? <Row style={{ padding: "12px" }}>
            <Col>
                <Paragraph >执行结果:</Paragraph>
            </Col>
            {result.map((item, index) => {
                // eslint-disable-next-line react/no-array-index-key
                return <Col span={24} key={`cc${index}`}>
                    <Paragraph>{item}</Paragraph>
                </Col>
            })}
        </Row> : null}


    </>
}